import React, {
    Component
} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Dimensions,
    ScrollView,
    TouchableOpacity,
    Image,
    Alert,
    ToastAndroid,
    ImageBackground
} from 'react-native';
import Util from './utils'

export default class MyANswearForType2 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectId:'',
            chutiAnswer:this.props.qainfo.options,
            ip:this.props.ip,
            userAnswer:"",
            oldId:this.props.qainfo.id,
            intervalIndex:"",
            submitflag:false
        }
    }
    componentDidMount(){
        let intervalIndex = setInterval(()=>this.getData()
        ,1000)
        this.setState({
            intervalIndex:intervalIndex
        })

    }
    componentWillUnmount(){
        clearInterval(this.state.intervalIndex);
    }
    //**********用户答案*****开始 */
    _renderAnswerItem(item){
        let text =""
        if(item.answerContent.length>0){
            text=item.answerOption+'、'+item.answerContent
        }else{
            text=item.answerOption
        }
        return  (
            <View style={[styles.infoansweritem]}>
                <Text style={[styles.infofontFormarrt]}>{text}</Text>
            </View>
    );
    }
    _renderAnswer(list){
        if(list){
            return list.map( item => this._renderAnswerItem(item) );

        }
    }
    //**********用户答案*****结束 */
    //*******开始***********答案选项********** */
    _renderSelectAnswerItem (item){
        return (
        <TouchableOpacity onPress={()=>this.onPressItem(item)}>
            <View style={[item.yesOption?styles.yesansweritem:styles.answeritem,]} >
                <Text style={[item.yesOption?styles.yesfontFormarrt:styles.fontFormarrt]}>{item.answerOption}</Text>
            </View>
        </TouchableOpacity>
    )};
    _renderSelectAnswer(list){
        if(list){
            return list.map( item => this._renderSelectAnswerItem(item) );
        }
    }
    //*****结束*************答案选项 */
    onPressItem(item){
        let data = this.state.chutiAnswer
        for(key in data){
            if(data[key].answerOption==item.answerOption){
                data[key].yesOption=true
            }else{
                data[key].yesOption=false
            }
        }
        this.setState({
            chutiAnswer:data,
            userAnswer:item.answerOption
        })
        
    }
    saveinfo() {
        if(this.state.submitflag){
            ToastAndroid.show('您已经回答过该题,不可重复回答', ToastAndroid.SHORT);
        }else{
        Alert.alert(
            '确认提交',
            '提交后就不能修改答案了，确定提交您的答案吗？',
            [
              {text: '提交', onPress: () => {
                    //if(this.props.qainfo.startAnswer=="1"){
                        let url = `http://${this.state.ip}:10081/api/submitAnswer` //人力
                        let data = this.props.qainfo
                        data.userCode = this.props.userCode
                        data.userName = this.props.userName
                        data.answer = this.state.userAnswer
                        data.timeOfAnswer = (new Date()).getTime()
                        Util.post(url, data, (result) => {
                            if(result.status==301){
                                ToastAndroid.show('您已经回答过该题,不可重复回答', ToastAndroid.SHORT);
                            }else if(result.status==200){
                                ToastAndroid.show('提交成功', ToastAndroid.SHORT);
                            }else{
                                ToastAndroid.show('提交失败', ToastAndroid.SHORT);
                            }
                        }, (error) => {
                            ToastAndroid.show('提交失败', ToastAndroid.SHORT);

                        })
              }},
              {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
            ],
            { cancelable: false }
          )
        }
    }
    getData(){
        const {navigate} = this.props.navigation
        let url = `http://${this.props.ip}:10081/api/getQuestionForApp?userCode=${this.props.userCode}`//人力
        let that =this
        Util.get(url, (result) => {

            if(result.status==301){
             //   ToastAndroid.show('您的账号已在其他地方登录,不可以重复使用', ToastAndroid.LONG);
                //navigate("LoginScreen")
                that.setState({
                    submitflag:true
                })
            }else{

                if(this.state.oldId!=result.id){
                    console.log("this.props.qainfo.id!=result.id",this.props.qainfo.id!=result.id,this.props.qainfo.id,result.id)

                    that.setState({
                        chutiAnswer:result.options,
                        oldId:result.id
                    })
                    console.table(this.state.beixuanxiang)
                }
             
            }
        },(error)=>{

        })
    }
    render() {
        return (
            <View>
                <View style={[styles.main,{width:Dimensions.get('window').width,height:Dimensions.get('window').height}]} >
                    <ImageBackground source={require('./image/kuang.png')} style={{width:Dimensions.get('window').width*80/100,height:400}} resizeMode='stretch'>
                        <View style={[styles.conteont]}>
                            <ScrollView>
                            <Text style={[styles.fontColor]}>
                                {this.props.qainfo.stem}
                            </Text> 
                            {/* <View style={[styles.answerYes]}>
                                {this._renderAnswer(this.props.qainfo.options)}
                            </View> */}
                            </ScrollView>
                        </View>
                    </ImageBackground>
                    {/* <ScrollView contentContainerStyle={[styles.answerlist2]} horizontal="true"> 
                        {this._renderSelectAnswer(this.state.chutiAnswer)}
                    </ScrollView> */}
                    <View style={[styles.answerlist2]} >
                        <Image source={require('./image/left.png')} style={[styles.imgStyle]}></Image>
                        <ScrollView horizontal="true"> 
                            {this._renderSelectAnswer(this.state.chutiAnswer)}
                        </ScrollView>
                        <Image source={require('./image/right.png')} style={[styles.imgStyle]}></Image>
                    </View>
                    {this.props.qainfo.startAnswer=="1"?
                        <View style={[styles.viewClass]}>
                            <TouchableOpacity onPress={this.saveinfo.bind(this)}>
                                <View style={[styles.btnClass]} >
                                    <Text style={{color:'#003365',fontSize:40}}>提  交</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                        :null
                    }
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    main:{
        paddingLeft:40,
        paddingRight:40,
         alignItems:'center',
         marginTop:50
    },
    fontColor:{
        color:'#000000',
        fontSize: 22,
        fontFamily: 'Georgia',
    },
    conteont:{
        height:290,
        // backgroundColor: '#d00000',
        width:670,
        marginTop:70,
        marginLeft:70,
        padding:20
    },
    answerlist2:{
        width:650,
        marginRight:200,
        // padding:20,
        flexDirection: 'row',
        flexWrap: 'wrap',
        // backgroundColor:'#ff0',
        marginTop:45,
        alignItems:'center'
    },
    yesansweritem:{
        justifyContent: 'center',
        alignItems:'center',
        borderColor: '#d00000',
        borderWidth:1 ,
        padding: 10,
        minWidth: 69,
        margin: 5,
        marginLeft:5,
        marginRight:10,
        borderRadius: 5,
        height:69
    },
    yesfontFormarrt:{
        color: '#d00000',
        fontSize:28,
        fontWeight:'bold'

    },
    fontFormarrt:{
        color: '#003365',
        fontSize:28,
        fontWeight:'bold'
    },
    answeritem:{
        justifyContent: 'center',
        alignItems:'center',
        borderColor: '#003365',
        borderWidth:1 ,
        padding: 10,
        minWidth: 69,
        margin: 5,
        marginLeft:5,
        marginRight:10,
        borderRadius: 5,
        height:69
    },
    infofontFormarrt:{
        color: '#000000',
        fontSize:24
    },
    infoansweritem:{
        // justifyContent: 'center',
        // alignItems:'center',
        // padding: 10,
        minWidth: 100,
        margin: 5,
        borderRadius: 5,
        // height:50
    },
    answerYes:{
        height:80,
        marginTop:10,
    },
    btnClass:{
        width:120,
        height:70,
         justifyContent:'center',
         alignItems:'center',
         marginTop:50,
         marginRight:5,
         borderRadius: 5,
         borderColor:'#003365' ,
         borderWidth: 3,
         color:'#003365' ,
     },
     viewClass:{
         width:125,
         justifyContent:'flex-end',
         alignItems:'flex-end',
         paddingLeft:40,
         paddingRight:0,
         position:'absolute',
         bottom:120,
         right:100,
         zIndex:999
     },
     imgStyle:{
        width:50,
        height:50,
        // backgroundColor:'#d00'
        opacity:0.3
     }
})